<template>
  <div class="mg-t-20">
    <div class="demo-inner-divider">拖拽上传1</div>
    <demo-drag1 class="demo-upload" />
  </div>
  <div class="mg-t-20">
    <div class="demo-inner-divider">拖拽上传2</div>
    <demo-drag2 class="demo-upload" />
  </div>
  <div class="mg-t-20">
    <div class="demo-inner-divider">拖拽上传3</div>
    <demo-drag3 />
  </div>
  <div class="mg-t-20">
    <div class="demo-inner-divider">自动上传</div>
    <demo-manualV2 class="demo-upload" />
  </div>
  <div class="mg-t-20">
    <div class="demo-inner-divider">手动上传</div>
    <demo-manual class="demo-upload" />
  </div>
  <div class="mg-t-20">
    <div class="demo-inner-divider">图片上传</div>
    <demo-picture class="demo-upload" />
  </div>

  <div class="mg-t-20">
    <div class="demo-inner-divider">图片上传失败</div> 
    <pictureError class="demo-upload" ></pictureError>
  </div>

  <div class="mg-t-20">
    <div class="demo-inner-divider">自动上传</div>
    <DemoManualTableV2 class="demo-upload"></DemoManualTableV2>
  </div>
  <div class="mg-t-20">
    <div class="demo-inner-divider">手动上传</div>
    <DemoManualTable class="demo-upload"></DemoManualTable>
  </div>
  <upload-md class="markdown-body mg-t-20" />
</template>
<script>
import DemoDrag1 from './drag1'
import DemoDrag2 from './drag2'
import DemoDrag3 from './drag3'
import DemoManual from './manual'
import DemoManualV2 from './manual-v2.vue'
import DemoPicture from './picture'
import DemoManualTable from './manual-table.vue'
import DemoManualTableV2 from './manual-tableV2.vue'
import pictureError from './pictureError.vue'
import uploadMd from '../../../docs/upload.md';


export default {
  components: {
    DemoDrag1,
    DemoDrag2,
    DemoDrag3,
    DemoManual,
    DemoManualV2,
    DemoManualTable,
    DemoManualTableV2,
    DemoPicture,
    pictureError,
    uploadMd
  },
}
</script>
<style scoped>
  .mg-t-20 {
    margin-top: 20px;
  }
  .demo-upload {
    width: 800px;
  }
</style>
